<template>
    <div>
        <!-- 头部四模块 -->
        <el-row class="topHeight">
            <!-- 个人信息 -->
            <el-col :span="6">
                <div class="grid-content">
                    <el-row class="ftitle">个人信息</el-row>
                    <el-row>
                        <el-form :model="userInfo" :rules="editFormRulesInfo" ref="editFormRefInfo" label-width="100px" size="mini" :disabled="disabledInfo">
                            <el-form-item label="当前用户:" prop="username">
                                <el-input :value="userInfo.username" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="姓  名:" prop="nickname">
                                <el-input v-model="userInfo.nickname"></el-input>
                            </el-form-item>
                            <el-form-item label="邮  箱:" prop="email">
                                <el-input v-model="userInfo.email"></el-input>
                            </el-form-item>
                            <el-form-item label="手  机:" prop="phone">
                                <el-input v-model="userInfo.phone" class="input-with-select">
                                    <el-select v-model="select" slot="prepend" placeholder="请选择" @change="selectChange">
                                        <el-option-group
                                        v-for="group in areaCodeList"
                                        :key="group.name"
                                        :label="group.name">
                                        <el-option
                                            v-for="item in group.countrys"
                                            :key="item.number"
                                            :label="item.name+item.number"
                                            :value="item.number">
                                        </el-option>
                                        </el-option-group>
                                    </el-select>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="身份证号:" prop="idcardNo">
                                <el-input v-model="userInfo.idcardNo"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-row>
                    <div style="text-align: center;">
                        <el-button v-if="disabledInfo"  type="primary" plain size="mini" icon="el-icon-edit" @click="disabledInfo=false">编辑</el-button>
                        <el-button v-if="!disabledInfo" type="primary" plain size="mini" icon="el-icon-document-checked" @click="editUserInfo">保存</el-button>
                    </div>
                </div>
            </el-col>
            <!-- 修改密码  -->
            <el-col :span="6">
                <div class="grid-content">
                    <el-row class="ftitle">修改密码</el-row>
                    <el-row>
                        <el-form :model="userPass" :rules="editFormRulesPass" ref="editFormRef" label-width="100px" size="mini" :disabled="disabledPass" class="demo-ruleForm">
                            <el-form-item label="手机号码:" prop="shop_name">
                                <el-input :value="userPass.phone" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="原 密 码:" prop="oldPassword">
                                <el-input v-model="userPass.oldPassword"></el-input>
                            </el-form-item>
                            <el-form-item label="新 密 码:" prop="newPassword">
                                <el-input v-model="userPass.newPassword"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码:" prop="checkPass">
                                <el-input v-model="userPass.checkPass" class="input-with-select"></el-input>
                            </el-form-item>
                            <el-form-item label="验 证 码:" prop="vcode">
                                <el-input v-model="userPass.vcode">
                                    <el-button slot="append" @click="verificationCode" :disabled="disabledCodeBtn">{{codeText}}</el-button>
                                </el-input>
                            </el-form-item>
                            <el-form-item v-if="!disabledPass" label-width="0"  style="text-align: center;">
                                <el-button type="primary" plain size="mini"
                                icon="el-icon-document-checked" @click="editPass('editFormRef',false)">修改当前密码</el-button>
                                <el-button type="primary" plain size="mini"
                                icon="el-icon-document-checked" @click="editPass('editFormRef',true)">通用手机密码</el-button>
                            </el-form-item>
                        </el-form>
                    </el-row>
                    <div style="text-align: center;">
                        <el-button v-if="disabledPass"  type="primary" plain size="mini" icon="el-icon-edit" @click="disabledPass=false">编辑</el-button>
                    </div>
                </div>
            </el-col>
            <!-- 个人头像 -->
            <el-col :span="6">
                <div class="grid-content">
                    <el-row class="ftitle">个人头像</el-row>
                    <el-row class="fileBody">
                        <el-upload
                        class="upload-demo"
                        :action="avatarUrl"
                        :on-success="atterProgress"
                        :show-file-list="false">
                            <el-button size="small" type="primary" plain>上传个人头像(200KB)</el-button>
                            <span slot="tip" class="el-upload__tip" style="margin-left:10px;color:red;">建议尺寸200 x 200</span>
                        </el-upload>
                        <el-image
                        v-if="avatar!=null"
                        style="width:100%; height:100%;height: calc(100% - 42px);margin-top:10px;"
                        :src="avatar"
                        fit="cover"></el-image>
                    </el-row>
                </div>
            </el-col>
            <!-- 个人签名 -->
            <el-col :span="6">
                <div class="grid-content">
                    <el-row class="ftitle">个人签名</el-row>
                    <el-row class="fileBody">
                        <el-upload
                        class="upload-demo"
                        :action="signUrl"
                        :on-success="signProgress"
                        :show-file-list="false">
                            <el-button size="small" type="primary" plain>上传个人签名(200KB)</el-button>
                            <span slot="tip" class="el-upload__tip" style="margin-left:10px;color:red;">建议尺寸200 x 200</span>
                        </el-upload>
                        <el-image
                        v-if="sign!=null"
                        style="width:100%; height:100%;height: calc(100% - 42px);margin-top:10px;"
                        :src="sign"
                        fit="cover"></el-image>
                    </el-row>
                </div>
            </el-col>
        </el-row>
        <!-- 底部tabs切换栏 -->
        <el-row class="bottomHeight">
            <el-tabs v-model="activeName" type="card">
                <!-- 单位  -->
                <el-tab-pane label="单位" name="unit">
                    <!-- 表格 -->
                    <el-row class="tableRow">
                        <el-table id="flow-table-buss" :data="listSwitch" style="width: 100%;border-top: 0;" size="mini" class="jzb-table"
                        height="100%" :span-method="objectSpanMethod"
                            highlight-current-row  @row-click="rowClick" :cell-class-name="cellClassName">
                            <el-table-column prop="systemName" label="系统平台名称" min-width="190"
                            :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column label="一键迁移菜单" min-width="290" align="center">
                                <template #default="{row}">      
                                    <el-link  :underline="false" @click="MergeUserMenu(row.userId,row.comId,'用户菜单')" type="primary">迁移用户菜单</el-link><span> | </span>
                                    <el-link  :underline="false" @click="MergeUserMenu(row.userId,row.comId,'业主菜单')" type="primary">迁移业主菜单</el-link><span> | </span>
                                    <el-link  :underline="false" @click="MergeUserMenu(row.userId,row.comId,'旧方菜单')" type="primary">迁移旧方菜单</el-link>
                                </template>
                            </el-table-column>
                            <el-table-column label="单位授权" width="80" align="center">
                                <template #default="{row}">
                                    <el-link  :underline="false" @click="loadMyUserMenup(row.userId,row.comId,'单位授权')" type="primary">授权</el-link>
                                </template>
                            </el-table-column>
                            <el-table-column prop="comName" label="单位名称" min-width="190" align="center"
                            :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="username" label="用户名" min-width="95" align="center"
                            :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="nickname" label="姓名"  min-width="80" align="center"
                            :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="phone" label="手机号码"  min-width="95" align="center"
                            :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="createTime" label="创建日期"  min-width="135" align="center"
                            :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column label="操作" min-width="80" align="center">
                                <template #default="{row}">
                                    <el-link  :underline="false" @click="getSwitchCom(row.comId,row.userId)" type="primary">切换登录</el-link>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>
                    <!-- 页码  -->
                    <el-row class="paginationRow">
                        <myPagination @pageChange="queryPage" :page="page"></myPagination>
                    </el-row>
                </el-tab-pane>
                <!-- 个人  -->
                <el-tab-pane label="个人" name="personal">
                    <!-- 表格 -->
                    <el-row class="tableRow">
                        <el-table id="flow-table-buss" :data="listUser" style="width: 100%;border-top: 0;" size="mini" class="jzb-table"
                            height="100%" :span-method="objectSpanUser"
                            :row-class-name="tableRowClassName"
                            highlight-current-row  @row-click="rowClick" :cell-class-name="cellClassName">
                            <el-table-column prop="systemName" label="系统平台名称" min-width="200"
                            style="background:red"
                            :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="comName" label="单位名称" min-width="200"
                            :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="username" label="用户名" min-width="100" align="center"
                            :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="nickname" label="姓名"  min-width="80" align="center"
                            :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="phone" label="手机号码"  min-width="100" align="center"
                            :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="createTime" label="创建日期"  min-width="140" align="center"
                            :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column label="操作"  min-width="300" align="center">
                                <template #default="{row}">
                                    <el-link  :underline="false" @click="getSwitchCom(row.comId,row.userId)" type="primary">切换登录</el-link>
                                    <span> | </span>
                                    <span>
                                        <el-link  :underline="false" v-if="!row.defaultCom" @click="setMyDefaultCom(row.comId,row.userId)" type="primary">设为默认单位</el-link>
                                        <el-link  :underline="false" v-else type="primary">已是默认单位</el-link>
                                    </span>
                                    <!-- <span v-if="row.defaultCom"></span> -->
                                    <span> | </span>
                                    <el-link  :underline="false" @click="loadMyUserMenup(row.userId,row.comId,'用户授权')" type="primary">授权</el-link>
                                    <span> | </span>
                                    <el-link  :underline="false" @click="loadMyUserMenup(row.userId,row.comId,'用户新1.0授权')" type="primary">新老授权迁移</el-link>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-row>
                    <!-- 页码  -->
                    <el-row class="paginationRow">
                        <myPagination @pageChange="queryPageUser" :page="pageUser"></myPagination>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </el-row>

        <!-- 授权对话框  -->
        <el-dialog id="flow-dialog-edit" :title="titleDialog" :visible.sync="warrantDialog" class="jzb-dialog warrantDialog" 
            :close-on-click-modal="false" width="80%" v-dialogDrag>
            <iframe :src="this.urlfinal" width="100%" height="99%" frameborder="0" scrolling="no"></iframe>
        </el-dialog>
        <!-- 迁移对话框  -->
        <el-dialog id="flow-dialog-edit" :title="'迁移'+transferTitle" :visible.sync="transferDialog" class="jzb-dialog transferDialog" 
            @close="transferClose"
            :close-on-click-modal="false" width="580px" v-dialogDrag>
            <div class="transferSon">
                <el-row>
                    <div> 进度 :</div>
                    <el-progress :text-inside="true" :stroke-width="24" :percentage="progress" color="#EBDBA7"></el-progress>
                </el-row>
                <el-row id="transBottom">
                    <div v-for="item in progreLogs" :key="item.index">{{item}}</div>
                </el-row>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import myPagination from "@/components/public/myPagination.vue";
import {GetRequestParams,dateformat} from "@/utils/utils.js";	
import {areaCodeJson} from "@/utils/areacode.js";	
import {user,auth} from "@/api/org.js";	
let Base64 = require('js-base64').Base64
export default {
    components: {
        myPagination,
    },
    data () {
        // 自定义校验规则 验证手机号
        var checkMobile = (rule, value, cb) => {
            // 验证手机号的正则表达式
            const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
            if (regMobile.test(value)) {
                return cb()
            }
            cb(new Error('请输入合法的手机号'))
        
        }
        // 修改密码
        var validatePass = (rule, value, callback) => {
            if (value.trim() === '') return callback(new Error('请输入新密码'));
            if (this.userPass.newPassword !== '') {
                if (value.length < 6) return callback(new Error('新密码密码不能小于6位,请重新输入'));
                this.$refs.editFormRef.validateField('checkPass');
            }
            callback();
        };
        var validatePass2 = (rule, value, callback) => {
            if (this.userPass.newPassword === '') return callback(new Error('请先输入新密码!'));
            if (value === '') return callback(new Error('请再次输入密码!'));
            if (value !== this.userPass.newPassword) return callback(new Error('两次输入密码不一致!'));
            return callback();
        };
        // 获取短信验证码
        var codeMessage=(rule, value, callback) => {
            if(!this.codeStatus) return (callback(new Error('请先获取验证码')),this.userPass.vcode='');
            if (value === '') return callback(new Error('请输入验证码'));
            return callback();
        };

        return {
            // 初始化信息
            comId:'', //单位ID
            userId:'',  // 用户id
            token:'', // token
            //  获取到的个人信息
            userInfo:{
                comId:'',
                userId:'',
                username:'',  // 用户名
                nickname:'',  // 姓名
                email:'',  // 邮箱
                phone:'',  // 手机
                areacode:'',  // 手机区号
                idcardNo:'',  // 身份证号
            },
            // 获取验证码
            codeText: "获取验证码",
            codeStatus:false,
            //  获取用户密码
            userPass:{
                userId:'',
                oldPassword:'',  // 旧密码
                newPassword:'',  // 新密码
                checkPass:'',  // 确认新密码
                vcode:'',  // 验证码
                updateAll:false // 一键更新,ture or false
            },
            //  修改个人信息表单按钮
            disabledInfo:true,
            //  修改密码表单按钮
            disabledPass:true,
            // 发送验证码按钮 
            disabledCodeBtn:false,
            // 验证码定时器
            verification:null,
            //  编辑个人信息的验证规则对象
            editFormRulesInfo: {
                nickname: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ],
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { validator: checkMobile, trigger: 'blur' }
                ]
            },
            //  修改密码的验证规则对象
            editFormRulesPass :{
                newPassword: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
                oldPassword: [
                    { required: true, message: '请输入原密码', trigger: 'blur' }
                ],
                // vcode: [
                //     { required: true, message: '请输入验证码', trigger: 'blur' }
                // ],
                vcode: [
                    { validator: codeMessage, trigger: 'blur' }
                ],
            },
            // 手机区号下拉 
            select: '',
            // 获取区号城市 
            areaCodeList:[],
            // tabs选项
            activeName: 'unit',
            // 选中行信息 
            currentRow: null,
            // 上传图片
            // 头像
            avatarUrl:'http://192.168.0.253:30001/file/fileupload/uploadOpen?biztype=user/avatar',
            avatar: '',
            // 单位 列表
            // 头像
            signUrl:'http://192.168.0.253:30001/file/fileupload/uploadOpen?biztype=user/sign',
            sign: '',
            // 单位 列表
            listSwitch:[],
            // 合并行列的空变量
            id_array: [],
            id_pos: 0,
            // 查询页码值单位
            page: { pageCurrent: 1, pageSize: 50, total: 0, }, //分页
            // 个人 列表
            listUser:[],
            // 查询页码值个人
            pageUser: { pageCurrent: 1, pageSize: 50, total: 0, }, //分页
            // 合并行列的空变量
            user_array: [],
            user_pos: 0,
            // 定时器 轮询
            myprogressId:null,
            // 授权对话框
            warrantDialog:false,
            titleDialog:'',
            urlfinal:'',
            // 迁移对话框
            transferDialog:false,
            transferTitle:'',
            progress:0,
            progreLogs:[]
        }
    },
    created () {
    },
    mounted () {
        // 获取初始化信息
        this.areaCodeList=areaCodeJson
        this.comId=this.$store.state.comId||GetRequestParams().comid;
        this.userId=this.$store.state.userid||GetRequestParams().userid;
        this.token=this.$store.state.token||GetRequestParams().token;
        this.getInfo()
    },
    methods: {
        // 获取初始化信息
        getInfo(){
            // 重置信息
            this.infoReset()
            //1.2 获取用户个人信息
            this.getUserInfo();
            // 获取单位
            this.getListSwitch();
            // 获取个人
            this.getListUser();
            
        },
        //1.2 获取用户个人信息
        getUserInfo(){
            let params={
                comId:this.comId,
                userId:this.userId,
            };
            user.get(params).then(res=>{
                // console.log(res);
                if (res.code != "30000") return this.$layer.msg(res.msg);
                // 渲染信息
                this.userInfo.comId = this.comId;
                this.userInfo.userId = this.userId;
                this.userInfo.username = res.username;
                this.userInfo.nickname = res.nickname;
                this.userInfo.email = res.email;
                this.userInfo.phone = res.phone;
                this.userInfo.areacode = res.areacode;
                this.userInfo.idcardNo = res.idcardNo;  
                this.userPass.userId = this.userId;                 
                this.userPass.phone = res.phone;            
                // 默认区号
                this.select = res.areacode

                // 用户头像/签名
                this.avatar=res.avatarUrl
                this.sign=res.signUrl
            })
        },
        //   编辑个人信息
        editUserInfo(){
            this.$refs.editFormRefInfo.validate(async valid => {
                if (!valid) return this.$layer.msg('请正确填写')
                user.update(this.userInfo).then(res=>{
                    this.disabledInfo=true
                    if (res.code != "30000") return this.$layer.msg(res.msg);
                    this.$layer.msg('编辑成功')               
                })
            })
        },
        // 修改密码
        editPass(formName,boolean){
            this.userPass.updateAll=boolean
            this.$refs[formName].validate((valid) => {
                if (!valid) return (this.$layer.msg('请正确填写'),this.infoReset())     
                user.updatePwd(this.userPass).then(res=>{
                    this.disabledPass=true
                    if (res.code != "30000") return (this.$refs.editFormRef.resetFields(),this.$layer.msg(res.msg),this.infoReset())
                    this.infoReset()// 发送验证码计时器清除
                    this.$layer.msg('修改密码成功')               
                })
            });
        },
        // 倒计时方法
        countDown(time) {
            if (time === 0) {
                this.disabledCodeBtn = false;
                this.codeText = "获取验证码";
                return;
            } else {
                this.disabledCodeBtn = true;
                this.codeText = "重新发送(" + time + ")";
                time--;
            }
            this.verification=setTimeout(() => {
                this.countDown(time);
            }, 1000);
        },
        //   获取验证码
        verificationCode(){
            let params={
                userId:this.userId
            }
            user.sendVcode(params).then(res=>{
                // console.log(res);
                if (res.code != "30000") return this.$layer.msg(res.msg);
                this.codeStatus=true
                this.userPass.vcode=''
                this.$layer.msg('验证码已发送')   
                this.countDown(60);            
            })
        },
        // 变色
        tableRowClassName({row}){
            // console.log(row,row.defaultCom);
            if(row.defaultCom) return 'warning-row';
        },
        // 获取单位
        getListSwitch(){
            let params={
                userId:this.userId,
                page: this.page.pageCurrent,
                size: this.page.pageSize,
            };
            user.listSwitch(params).then(res=>{
                // console.log(res);
                if (res.code != "30000") return this.$layer.msg(res.msg);
                // 渲染信息
                this.listSwitch = res.records;
                // console.log(res.records.systemId);
                if(res.records.length==0 && this.page.pageCurrent>1){
                    this.page.pageCurrent-= 1;
                    this.getListSwitch();
                }
                this.page.total = res.total;

                // 合并行列所需
                this.id_array = []
                this.id_pos = 0
                for(let i = 0 ; i < this.listSwitch.length; i++) {
                    // 如果当 i == 0 说明数据是第一行, 需要重新赋值
                    if(i == 0) {
                        // this.id_array.push(1) 说明这一行数据被显示出来
                        this.id_array.push(1)
                        // this.id_pos = 0 重置当前的计数器
                        this.id_pos = 0
                    } else {// 说明不是从第一行开始遍历的
                        // 判断当前的指定数据是否和之前的指定数据值相同
                        if(this.listSwitch[i].systemId == this.listSwitch[i-1].systemId) {
                            // 如果相同就需要将 this.id_array 的数据自加
                            this.id_array[this.id_pos] += 1
                            // 同时需要将 this.id_array push一个0 表示下一行不用显示
                            this.id_array.push(0)
                        } else {// 说明 当前的数据和上一行的指定数据不同
                            // this.id_array.push(1) 说明当前一行的数据需要显示
                            this.id_array.push(1)
                            // 重新给计数器赋值
                            this.id_pos = i
                        }
                    }
                }
            })
        },
        // 获取个人
        getListUser(){
            let params={
                userId:this.userId,
                page: this.pageUser.pageCurrent,
                size: this.pageUser.pageSize,
            };
            user.listSwitch(params).then(res=>{
                // console.log(res);
                if (res.code != "30000") return this.$layer.msg(res.msg);
                // 渲染信息
                this.listUser = res.records;
                // console.log(res.records.systemId);
                if(res.records.length==0 && this.pageUser.pageCurrent>1){
                    this.pageUser.pageCurrent-= 1;
                    this.getListUser();
                }
                this.pageUser.total = res.total;

                // 合并行列所需
                this.user_array = []
                this.user_pos = 0
                for(let i = 0 ; i < this.listUser.length; i++) {
                    // 如果当 i == 0 说明数据是第一行, 需要重新赋值
                    if(i == 0) {
                        // this.user_array.push(1) 说明这一行数据被显示出来
                        this.user_array.push(1)
                        // this.user_pos = 0 重置当前的计数器
                        this.user_pos = 0
                    } else {// 说明不是从第一行开始遍历的
                        // 判断当前的指定数据是否和之前的指定数据值相同
                        if(this.listUser[i].systemId == this.listUser[i-1].systemId) {
                            // 如果相同就需要将 this.user_array 的数据自加
                            this.user_array[this.user_pos] += 1
                            // 同时需要将 this.user_array push一个0 表示下一行不用显示
                            this.user_array.push(0)
                        } else {// 说明 当前的数据和上一行的指定数据不同
                            // this.user_array.push(1) 说明当前一行的数据需要显示
                            this.user_array.push(1)
                            // 重新给计数器赋值
                            this.user_pos = i
                        }
                    }
                }
            })
        },
        // 切换单位 / 个人
        getSwitchCom(comId,userId){
            // console.log(comId,userId);
            let params={
                comId:comId,
                userId:userId,
                token:this.token,
            };
            auth.switchCom(params).then(res=>{
                // console.log(res);
                if (res.code != "30000") return this.$layer.msg('切换失败!'+res.msg);
                // 渲染信息
                this.comId=res.comId
                this.userId=res.userId
                this.token=res.token
                // this.getInfo()

                // 更改地址栏信息并覆盖当前登录
                // this.router({
                //     path:`./UserInfo?userid=${this.userId}&comid=${this.comId}&token=${this.token}`
                // })
                window.location.href=`${window.location.href.split('?')[0]}?userid=${this.userId}&comid=${this.comId}&token=${this.token}`

            })
        },
        // 重置定时器 发送验证码
        infoReset(){
            this.countDown(0)   // 发送验证码
            clearInterval(this.verification); // 发送验证码计时器
        },
        // 设置默认单位
        setMyDefaultCom(comId,userId){
            let params={
                comId:comId,
                userId:userId,
                defaultCom:true,
            };
            user.setDefault(params).then(res=>{
                // console.log(res);
                if (res.code != "30000") return this.$layer.msg('设置默认单位成功失败!'+res.msg);
                // 渲染信息
                this.$layer.msg('设置默认单位成功!');
                this.getListUser()
                return 
            })
        },
        //1.0 点击一行
        rowClick(val) {
            // console.log(val);
            this.row = val;
        },
        cellClassName({row, column, rowIndex, columnIndex}){
            let className = column.property?'row'+rowIndex+'-'+column.property:''
            return className;
        },
        //1.1 分页查询单位
        queryPage() {
            this.getListSwitch();
        },
        //1.1 分页查询个人
        queryPageUser() {
            this.getListUser();
        },
        //查询第一页
        queryFirstPage(){
            this.page.pageCurrent = 1;  // 单位
            this.pageUser.pageCurrent = 1;  // 个人
            this.getListUser();  // 个人
            this.getListSwitch();  // 单位
        },
        // 图片上传操作 头像
        atterProgress(res) {
            // console.log(file,res);
            if (res.code != "30000") return this.$layer.msg('上传个人头像失败'+res.msg);
            let params={
                comId:this.comId,
                userId:this.userId,
                avatarUrl:res.url
            };
            user.update(params).then(res=>{
                this.disabledInfo=true
                if (res.code != "30000") return this.$layer.msg(res.msg);
                this.$layer.msg('上传个人头像成功')    
                this.getUserInfo();           
            })
        },
        // 图片上传操作 签名
        signProgress(res) {
            // console.log(res);
            if (res.code != "30000") return this.$layer.msg('上传个人签名失败'+res.msg);
            let params={
                comId:this.comId,
                userId:this.userId,
                signUrl:res.url
            };
            user.update(params).then(res=>{
                this.disabledInfo=true
                if (res.code != "30000") return this.$layer.msg(res.msg);
                this.$layer.msg('上传个人签名成功')    
                this.getUserInfo();           
            })
        },
        // 下拉操作
        selectChange(event){
            // 改变区号
            this.userInfo.areacode=event
        },
        // 键迁移单位下全部用户菜单  完成
        MergeUserMenu(userid, comid, select) {
            // console.log('原来'+this.userId,'传值'+userid, '传值'+comid, select);
            this.progreLogs=[]
            this.transferTitle=select
            let url=''
            if (select == '用户菜单') url=`${this.grantUrl}/Menu/upgradeAllUsers?async=true&comId=${comid}&opUserId=${this.userId}&opComId=${this.comId}`
            if (select == '业主菜单') url=`${this.grantUrl}/Menu/upgradeOldOwnUsers?async=true&comId=${comid}&opUserId=${this.userId}&opComId=${this.comId}`
            if (select == '旧方菜单') url=`${this.grantUrl}/Menu/upgradeFangUsers?async=true&comId=${comid}&opUserId=${this.userId}&opComId=${this.comId}`

            this.$confirm(`您确定一键迁移${select}吗?`, '提示',{type: 'warning'})
            .then( () => {
                // console.log(url);
                this.$post(url)
                .then(res => {
                    // console.log(res);
                    if (res.code != "30000") return this.$layer.msg("迁移失败！" + res.msg);
                    var progressId = res.data.progressId;
                    // 打开迁移对话框,显示进度条
                    this.transferDialog=true
                    // 定时器轮询
                    let _this=this
                    this.myprogressId = setInterval(()=> { _this.timeinvter(progressId); }, 1000);
                })
                .catch(err => {
                    // console.log(err)
                    this.$layer.msg("迁移失败！" + err.msg);
                })
            })
            .catch( () => {
                this.$layer.msg(`已取消一键迁移${select}`);
            });
        }, 
        // 迁移进度条
        timeinvter(progressId) {
            try {
                var url=`${this.grantUrl}/Menu/upgradeAllUsersProgress?progressId=${progressId}&opUserId=${this.userId}&opComId=${this.comId}`
                this.$get(url)
                .then(res => {
                    // console.log(res.data);
                    if (res.code != "30000") return this.$layer.msg("迁移失败！" + res.msg);
                    this.progress=parseFloat(res.data.percentText.replace('%',''))
                    var logs=res.data.logs
                    // this.progreLogs.push(logs);
                    if (logs!=null&&logs.length>0){
                        for (var i = 0; i < logs.length; i++) {
                            this.progreLogs.push(logs[i])
                        }
                    }
                    // 迁移成功
                    if (res.data.complete) {  
                        clearInterval(this.myprogressId);
                        this.$layer.msg("迁移成功!");
                        // 关闭对话框
                        // this.transferDialog=false
                        return 
                    }
                })
            } catch (e) {
                this.$layer.msg("迁移失败!请稍后重试");
                clearInterval(this.myprogressId);
                this.transferDialog=false
            }
        },
        // 叉号关闭迁移结束轮询
        transferClose(){
            clearInterval(this.myprogressId);
        },
        // 授权  完成
        loadMyUserMenup(_useridx, comid,select) {
            // console.log(select);
            // 打开授权对话框 
            this.warrantDialog=true
            // com_id 是需要调用授权的id  
            // comid是当前操作用户的单位id
            var url = { "com_id": comid, 'user_id': _useridx }
            // let urlfinal=''
            this.titleDialog=select
            if (select == '用户授权') this.urlfinal =`${this.nodetUrl}/base/new_oldAllowUser?comid=${this.comId}&opUserId=${this.userId}&jsonstr=${Base64.encode(JSON.stringify(url))}&token=${this.token}`
            if (select == '用户新1.0授权') this.urlfinal =`${this.nodetUrl}/base/allowgrant?comid=${this.comId}&opUserId=${this.userId}&jsonstr=${Base64.encode(JSON.stringify(url))}&token=${this.token}`
            if (select == '单位授权') this.urlfinal =`${this.nodetUrl}/base/AllowCom?comid=${this.comId}&opUserId=${this.userId}&jsonstr=${Base64.encode(JSON.stringify(url))}&token=${this.token}`
        },
        // 合并行 / 列  单位
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            // console.log(row,column, rowIndex, columnIndex);
            // 用于给第一列的table判断是否合并
            if(columnIndex === 0||columnIndex === 1) {
                // this.id_array[rowIndex] 取出当前存放行的合并状态
                const _row = this.id_array[rowIndex] 
                // 判断当前的 列是否需要显示
                const _col = _row > 0 ? 1 : 0
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }
        },
        // 合并行 / 列  个人
        objectSpanUser({ row, column, rowIndex, columnIndex }) {
            // 用于给第一列的table判断是否合并
            if(columnIndex === 0) {
                // this.user_array[rowIndex] 取出当前存放行的合并状态
                const _row = this.user_array[rowIndex] 
                // 判断当前的 列是否需要显示
                const _col = _row > 0 ? 1 : 0
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }
        }
    }
}
</script>

<style scoped lang="less">
@import "~@/assets/style/base.css";
@import "~@/assets/style/common.less";
.topHeight{
    height: 300px;
    width: 100%;
    // box-sizing: border-box;
    // EAF2ff
}
.el-col{
    height:100%;
}
.grid-content{
    height:100%;
    border: 1px solid #95B8E7;
    overflow: hidden;
    /deep/.el-row{
        padding-right: 10px;
        .el-select .el-input {
            width: 130px;
        }
        .el-form {
            padding: 0;
            }
        .el-form-item--mini.el-form-item, 
        .el-form-item--small.el-form-item {
            margin-bottom: 15px;
        }
    }
    /deep/.el-input-group__prepend {
        border: 1px solid #95B8E7 !important;
    }
    .ftitle {
        font-size: 14px;
        padding: 5px 0;
        font-weight: bold;
        text-align: center;
        margin-bottom: 10px;
        border-bottom: 1px solid #ccc;
    }
    .fileBody{
        height:calc(100% - 43px);
        // background: pink;
        box-sizing: border-box;
        padding: 0 10px 10px;
    }
}

/deep/.bottomHeight{
    height: calc(100vh - 300px);
    width: 100%;
    border: 1px solid #95B8E7;
    padding-top: 5px;
    .el-tabs__item {
        padding: 0 10px;
        height: 27px;
        line-height: 27px;
    }
    .el-tabs--card{
        height: 100%;
        >.el-tabs__header{
            margin: 0; 
            .el-tabs__nav {
                margin-left: 4px;
            }
        }
        >.el-tabs__content{
            height: calc(100% - 28px);
        }
    }
    .el-tabs__item.is-active {
        color: #409EFF;
        // background: #f4f4f4;
        font-weight: 700;
    }
    .el-tab-pane{
        height: 100%;
    }
    .tableRow{
        width: 100%;
        height: calc(100% - 34px);
    }
    .paginationRow {
        height: 32px;
        line-height: 32px;
    }
}
/deep/.el-table .jzb-table {
    border-top: 0;
}
// .bottomHeight /deep/.el-tabs__content {
//     background: pink;
// }
/deep/::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

// 改变css样式
/deep/.el-table .warning-row {
    background-color: #3b7eec !important;
    color: #fff !important;
    td {
        color: #fff !important;
        font-size: 12px;
        line-height: 16px;
        border-right: 1px dotted #ccc;
        border-bottom: 1px dotted #ccc;
        background-color: #3b7eec !important;
        padding: 3px 0;
        .el-link.el-link--primary {
            color: #fff !important;
        }
    }
    &:hover>td {
        background-color: #3b7eec !important;
    }
}
.warrantDialog /deep/.el-dialog__body{
    height: 600px;
    padding: 5px !important;
    box-sizing: border-box;
}
.transferDialog /deep/.el-dialog__body{
    height: 600px;
    padding: 5px !important;
    box-sizing: border-box;
    .transferSon{
        height:100%;
        width:100%;
        // background:red;
        padding: 10px;
        box-sizing: border-box;
        /deep/.el-progress-bar__innerText {
            color: #000;
        }
        #transBottom{
            width: 100%;
            height: 500px;
            border: 1px solid #95B8E7;
            margin-top: 10px;
            border-radius:8px ;
            overflow-y: auto;
            padding: 5px;
            box-sizing: border-box;
        }
        /deep/.el-progress-bar__outer {
            height: 6px;
            border-radius: 100px;
            background-color:#fff;
            overflow: hidden;
            position: relative;
            vertical-align: middle;
            border: 1px solid #95B8E7;
        }
    }
}
</style>
